<template>
  <div>
    <div class="header">
      <div class="logo-title">
        <el-button type="text">
          <router-link :to="{ path: '/' }">返回首页 | </router-link>
        </el-button>
        欢迎注册
      </div>
      <div class="have-account">
        "已有账号？"
        <a href="../login">请登录</a>
      </div>
    </div>
    <div class="container">
      <el-divider></el-divider>
      <el-row style="text-align: center; color: #551a8b">{{ userIdentity }}注册</el-row>
      <div class="progress-bar">
        <el-steps :active="active"
                  simple>
          <el-step title="验证手机号"
                   icon="el-icon-edit"></el-step>
          <el-step title="账号信息"
                   icon="el-icon-upload"></el-step>
          <el-step title="注册成功"
                   icon="el-icon-picture"></el-step>
        </el-steps>
      </div>
      <div v-show="active === 0"
           id="step1">
        <div class="item-phone-wrap">
          <div class="form-item-phone">
            <el-form :rules="phoneRules"
                     ref="phoneForm"
                     :model="phoneFormData">
              <el-form-item prop="phone">
                <el-input clearable
                          prefix-icon="el-icon-user"
                          style="width: 300px"
                          placeholder="请输入手机号"
                          v-model="phoneFormData.phone"></el-input>
              </el-form-item>
              <el-form-item prop="veriCode">
                <el-input prefix-icon="el-icon-receiving"
                          style="width: 300px"
                          v-model="phoneFormData.veriCode"
                          placeholder="收到的验证码"><span slot="append"
                        v-show="getCodeShow"
                        @click="getCode">获取验证码</span><span slot="append"
                        v-show="!getCodeShow">{{ count }}后重新获取</span></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div style="width: 300px; margin: auto">
            <el-button type="danger"
                       @click="changeStep"
                       plain>
              下一步
            </el-button>
          </div>
        </div>
        <div class="reg-other">
          <a v-show="isCustomer"
             href="javascript:;"
             @click="changeRegId">企业用户注册</a>
          <a v-show="!isCustomer"
             href="javascript:;"
             @click="changeRegId">普通用户注册</a>
        </div>
      </div>
      <div id="step2"
           v-show="active === 1">
        <el-form :model="accountFormData"
                 status-icon
                 :rules="accountFormRules"
                 ref="accountForm"
                 label-width="100px"
                 class="account -information">
          <el-form-item label="用  户  名"
                        prop="userId">
            <el-input clearable
                      style="width: 300px"
                      prefix-icon="el-icon-user"
                      v-model="accountFormData.userId"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="设 置 密 码"
                        prop="userPassword">
            <el-input clearable
                      prefix-icon="el-icon-lock"
                      style="width: 300px"
                      v-model="accountFormData.userPassword"
                      placeholder="输入新密码"
                      show-password></el-input>
          </el-form-item>
          <el-form-item label="确 认 密 码"
                        prop="confirmPassword">
            <el-input clearable
                      v-model="accountFormData.confirmPassword"
                      prefix-icon="el-icon-key"
                      style="width: 300px"
                      show-password
                      placeholder="确认密码"></el-input>
          </el-form-item>
          <el-form-item label="收 货 地 址"
                        prop="userPlace">
            <el-input clearable
                      prefix-icon="el-icon-info"
                      v-model="accountFormData.userPlace"></el-input>
          </el-form-item>
          <el-form-item label="姓名"
                        prop="userName">
            <el-input clearable
                      style="width: 320px"
                      prefix-icon="el-icon-medal"
                      v-model.number="accountFormData.userName"></el-input>
          </el-form-item>
          <el-form-item label="身份证"
                        prop="userIdentity">
            <el-input clearable
                      style="width: 320px"
                      prefix-icon="el-icon-s-custom"
                      v-model="accountFormData.userIdentity"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱"
                        prop="userEmail">
            <el-input clearable
                      style="width: 320px"
                      prefix-icon="el-icon-s-help"
                      v-model="accountFormData.userEmail"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input clearable
                      style="width: 150px"
                      prefix-icon="el-icon-camera"
                      v-model.number="accountFormData.userAge"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="accountFormData.userSex">
              <el-radio label="1">男</el-radio>
              <el-radio label="2">女</el-radio>
              <el-radio label="0">保密</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="submit">提交</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="active === 2">
        <router-link :to="{ path: '/login' }">
          <el-button type="primary">去往登陆页面</el-button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import {
  checkPhone,
  checkUserName,
  checkEmail,
  checkRealName,
  checkIdNumber,
} from 'utils/validate.js'
import { request } from 'network/request.js'

export default {
  data() {
    var checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'))
      }
      if (value.length < 6) {
        return callback(new Error('密码不能小于6位'))
      } else {
        if (this.accountFormData.confirmPassword !== '') {
          this.$refs.accountForm.validateField('confirmPassword')
        }
        callback()
      }
    }
    var checkConfirmPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入确认密码'))
      } else if (value.length < 6) {
        return callback('密码不能小于6位')
      } else if (value !== this.accountFormData.userPassword) {
        return callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      active: 0,
      phoneFormData: {
        phone: '',
        veriCode: '',
      },
      accountFormData: {
        userId: '',
        userPassword: '',
        userName: '',
        confirmPassword: '',
        userPlace: '',
        userIdentity: '',
        userEmail: '',
        userSex: '0',
        userAge: '',
        userPhone: '',
        userAttribute: '3',
      },
      phoneRules: {
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            validator: checkPhone,
            trigger: 'blur',
          },
        ],
        veriCode: [
          {
            required: true,
            min: 6,
            max: 6,
            message: '请输入正确的验证码',
            trigger: 'blur',
          },
        ],
      },
      accountFormRules: {
        userId: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          {
            validator: checkUserName,
            trigger: 'blur',
          },
        ],
        userPassword: [
          { required: true, validator: checkPassword, trigger: 'blur' },
        ],
        confirmPassword: [
          { required: true, validator: checkConfirmPassword, trigger: 'blur' },
        ],
        userPlace: [
          { required: true, message: '收货地址不能为空', trigger: 'blur' },
        ],
        userName: [
          { required: true, validator: checkRealName, trigger: 'blur' },
        ],
        userIdentity: [
          { required: true, validator: checkIdNumber, trigger: 'blur' },
        ],
        userEmail: [{ validator: checkEmail, trigger: 'blur' }],
      },
      userIdentity: '普通用户',
      isCustomer: true,
      getCodeShow: true,
      count: 60,
    }
  },
  created() {},
  methods: {
    changeStep() {
      let _this = this
      _this.$refs.phoneForm.validate((valid) => {
        if (valid) {
          _this.accountFormData.userPhone = this.phoneFormData.phone
          ++_this.active
        } else {
          return false
        }
      })
    },
    getCode() {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.getCodeShow = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.getCodeShow = true
            clearInterval(timer)
            this.timer = null
          }
        }, 1000)
      }
    },
    submit() {
      this.$refs.accountForm.validate(async (valid) => {
        if (valid) {
          const res = await request({
            url: '/account',
            method: 'post',
            data: this.accountFormData,
          })
          if (res.code === 1) {
            ++this.active
            return
          } else {
            const message = res.message
            return this.$message({
              type: 'error',
              message,
            })
          }
        }
      })
    },
    reset() {
      this.$refs.accountForm.resetFields()
    },
    changeRegId() {
      this.isCustomer = !this.isCustomer
      this.userIdentity = this.isCustomer ? '普通用户' : '企业用户'
    },
  },
}
</script>

<style lang="less">
.header {
  height: 100px;
  margin: 0 100px;
  .logo-title {
    float: left;
    height: 34px;
    line-height: 34px;
    font-size: 24px;
    color: #333;
    margin-top: 34px;
    .router-link-active {
      font-size: 24px;
    }
  }
  .have-account {
    font-size: 16px;
    float: right;
    margin-top: 55px;
    color: #999;
  }
}
.container {
  width: 600px;
  height: 800px;
  background: #f5f5f5;
  margin: 10px auto;
  .progress-bar {
    margin: 20px auto;
  }
  #step1 {
    width: 500px;
    margin: 50px auto;
    .form-item-verification {
      margin: 20px auto;
    }
    .reg-other {
      margin: 50px auto;
    }
  }
  #step2 {
    margin: 50px auto;
  }
}
</style>
